<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>赠送礼物列表</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/gift.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="main">
      <div class="top_back" @click="closeGiftBox"></div>
      <div class="gift_box">
        <div class="gift_back border-bottom">
          <span @click="closeGiftBox">取消</span>
        </div>
        <div class="swiper-container border-bottom">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(slide, index) in giftList" :key="index">
              <div v-for="(item, i) in slide" :key="item.id" :class="['gift-item', slideIndex == index && isGiftIndex == i ? 'gift-selected' : '']"
                @click="selectGift(item,i)">
                <div id="gift-item-vip" v-if="item.type == 1">
                  <img id="gift-item-vip-img" src="../image/gift_vip.png" alt="">
                </div>
                <img class="gift-item-img" :src="item.file" alt="">
                <p class="p1">{{item.gold}}港币</p>
                <p class="p2">{{item.name}}</p>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="gift_bottom">
          <div class="bi">{{userInfo.gold}}币<span @click="openRecharge">充值<i class="iconfont icon-next"></i></span></div>
          <div class="pay"></div>
          <div class="dian"><input type="button" value="赠送" @click="giveGift"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>

<script>
  var app, rong, mySwiper;
  apiready = function () {
    rong = api.require('rongCloud2');
    app = new Vue({
      el: '#app',
      data: {
        to_uid: '',
        to_uname: '',
        to_uavatar: '',
        giftList: [],
        currentSlideIndex: 0,
        slideIndex: 0,
        isGiftIndex: 0,
        userInfo: {
          gold: '100',
        },
        giftId: '',
        giftName: '',
        giftType: '',
        giftGold: '',
        giftSvga: '',
        giveGiftFlag: true,
      },
      created: function () {
        this.to_uid = api.pageParam.to_uid;
        this.to_uname = api.pageParam.to_uname;
        this.to_uavatar = api.pageParam.to_uavatar;
      },
      mounted: function () {
        this.getGiftIndex();
        this.getUserIndex();
      },
      methods: {
        closeGiftBox: function () {
          api.closeFrame({
            name: 'gift'
          });
        },
        getUserIndex: function () {
          var _this = this;
          api.ajax({
            url: baseUrl + 'user/index',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.userInfo = ret.data;
            }
          })
        },
        getGiftIndex: function () {
          var _this = this;
          api.ajax({
            url: baseUrl + 'gift/index',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid')
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.isGiftIndex = 0;
              if (ret.data.length > 0) {
                var page = Math.ceil(ret.data.length/8)
                for (var i = 0; i < page; i++) {
                  var tempArr = [];
                  for (var j = 0; j < 8; j++) {
                    if (!!ret.data[(i*8+j)]) {
                      tempArr.push(ret.data[(i*8+j)])
                    }
                  }
                  _this.giftList.push(tempArr)
                }
                _this.giftId = _this.giftList[0][0].id;
                _this.giftName = _this.giftList[0][0].name;
                _this.giftType = _this.giftList[0][0].type;
                _this.giftGold = _this.giftList[0][0].gold;
                _this.giftFile = _this.giftList[0][0].file;
                _this.giftSvga = _this.giftList[0][0].source;
                setTimeout( function () {
                  mySwiper = new Swiper('.swiper-container', {
                    autoplay: false,
                    resistanceRatio: 0,
                    pagination: {
                      el: '.swiper-pagination',
                    },
                    on: {
                      slideChangeTransitionStart: function(){
                        _this.currentSlideIndex = this.activeIndex
                      },
                    },
                  })
                }, 300);
              }
            }
          })
        },
        selectGift: function (item, index) {
          var _this = this;
          _this.slideIndex = _this.currentSlideIndex;
          _this.isGiftIndex = index;
          _this.giftId = item.id;
          _this.giftName = item.name;
          _this.giftType = item.type;
          _this.giftGold = item.gold;
          _this.giftFile = item.file;
          _this.giftSvga = item.source;
        },
        giveGift: function () {
          var _this = this;
          if (_this.giveGiftFlag) {
            _this.giveGiftFlag = false;
            api.showProgress({
              title: '',
              text: ''
            });
            api.ajax({
              url: baseUrl + 'message/givgift',
              method: 'post',
              headers: {
                token: $api.getStorage('deviceToken')
              },
              data: {
                values: {
                  uid: $api.getStorage('uid'),
                  to_uid: _this.to_uid,
                  gid: _this.giftId
                },
              }
            }, function (ret, err) {
              _this.giveGiftFlag = true;
              api.hideProgress();
              api.toast({
                msg: ret.message[0]
              });
              if (ret.status == 200) {
                var giveGiftExtra = {
                  fromId: $api.getStorage('uid'),
                  fromName: $api.getStorage('uname'),
                  fromAvatar: $api.getStorage('uavatar'),
                  toId: _this.to_uid,
                  toName: _this.to_uname,
                  toAvatar: _this.to_uavatar,
                  GiftId: _this.giftId,
                  GiftName: _this.giftName,
                  GiftImg: _this.giftFile,
                  GiftGold: _this.giftGold,
                  GiftSvga: _this.giftSvga
                }
                rong.sendCommandMessage({
                  conversationType: 'PRIVATE',
                  targetId: _this.to_uid + 'a',
                  name: 'give_gift_notice_private',
                  data: JSON.stringify(giveGiftExtra)
                }, function (ret, err) {});
                rong.sendRichContentMessage({
                  conversationType: 'PRIVATE',
                  targetId: _this.to_uid + 'a',
                  title: 'give_gift_message',
                  description: '送你一份精美礼物',
                  imageUrl: _this.giftFile,
                  extra: JSON.stringify(giveGiftExtra)
                }, function (ret, err) {});
                api.sendEvent({
                  name: 'refreshIM',
                  extra: {
                    type: 'RC:ImgTextMsg',
                    title: 'give_gift_message',
                    con: '送你一份精美礼物',
                    imageUrl: _this.giftFile,
                    mode: 'SEND',
                    id: $api.getStorage('uid'),
                    name: $api.getStorage('uname'),
                    avatar: $api.getStorage('uavatar')
                  }
                });
                if (!!_this.giftSvga) {
                  api.openFrame({
                    name: 'svga',
                    url: 'svga.html',
                    rect: {
                      x: 0,
                      y: 0,
                      w: api.winWidth,
                      h: api.winHeight
                    },
                    bounces: false,
                    pageParam: giveGiftExtra
                  });
                }
                api.sendEvent({
                  name: 'refreshUserHome',
                });
                api.sendEvent({
                  name: 'live_give_gift_message',
                  extra: giveGiftExtra
                });
                setTimeout(function () {
                  api.closeFrame({
                    name: 'gift'
                  });
                }, 1000);
              }
              if (ret.status == 401) {
                api.sendEvent({
                  name: 'giveGift_showRechargeDialog',
                });
              }
              if (ret.status == 400) {
                api.sendEvent({
                  name: 'giveGift_showVipDialog',
                });
              }
            })
          }
        },

        openRecharge: function () {
          api.openWin({
            name: 'recharge',
            url: 'recharge.html',
            slidBackEnabled: false
          });
        },

      },

    })
  }
</script>

</html>